<template>
    <div>
        <view class="wrap-order-btn-bg flex align-center just-end f-26">
            <view
                :class="
                    btnType == '1'
                        ? 'list-btn one-btn'
                        : 'details-btn four-btn'
                "
                v-if="dataInfo.status == '-1' || dataInfo.status == '7'"
                @click.stop="onDeleteOrder()"
            >
                删除
            </view>

            <view
                :class="
                    btnType == '1'
                        ? 'list-btn one-btn'
                        : 'details-btn four-btn'
                "
                v-if="dataInfo.status == '7' && dataInfo.is_comment != 1"
                @click.stop="onEvaluate()"
            >
                去评价
            </view>

            <view
                :class="
                    btnType == '1'
                        ? 'list-btn one-btn'
                        : 'details-btn four-btn'
                "
                v-if="dataInfo.status == '1'"
                @click.stop="onCancelOrder()"
            >
                取消订单
            </view>

            <view
                :class="
                    btnType == '1'
                        ? 'list-btn two-btn'
                        : 'details-btn three-btn'
                "
                v-if="
                    dataInfo.status == '2' ||
                    dataInfo.status == '3' ||
                    dataInfo.status == '4' ||
                    dataInfo.status == '5'
                "
                @click.stop="onApplyRefund()"
            >
                申请退款
            </view>

            <view
                :class="
                    btnType == '1'
                        ? 'list-btn two-btn'
                        : 'details-btn three-btn'
                "
                @click.stop="onUpgrade()"
                v-if="dataInfo.status == '6' && dataInfo.is_add == 0 && dataInfo.is_upgrade == 0"
            >
                升级/加钟
            </view>

            <view
                :class="
                    btnType == '1'
                        ? 'list-btn two-btn'
                        : 'details-btn three-btn'
                "
                v-if="dataInfo.status == '7' && dataInfo.is_add == 0 && dataInfo.is_upgrade == 0"
                @click.stop="oneMoreOrder()"
            >
                再来一单
            </view>

            <view
                :class="
                    btnType == '1'
                        ? 'list-btn two-btn'
                        : 'details-btn three-btn'
                "
                v-if="dataInfo.status == '1'"
                @click.stop="onPayOrder()"
            >
                去支付
            </view>
        </view>
    </div>
</template>

<script>
export default {
    props: {
        /**
         * 订单信息
         */
        dataInfo: {
            type: Object,
            default: null,
        },
        /**
         * 按钮类型 1:订单列表 2:订单详情
         */
        btnType: {
            type: String,
            default: "",
        },
    },
    data() {
        return {};
    },
    methods: {
        /**
         * 删除订单
         */
        onDeleteOrder() {
            this.$filters.onDeleteOrder(this.dataInfo.id, () => {
                this.$emit("onRefresh");
            });
        },
        /**
         * 去支付
         */
        onPayOrder() {
            this.$filters.onPayOrder(this.dataInfo.id, () => {
                this.$emit("onRefresh");
            });
        },
        /**
         * 取消订单
         */
        onCancelOrder() {
            this.$filters.onCancelOrder(this.dataInfo.id, () => {
                this.$emit("onRefresh");
            });
        },
        // 申请退款
        onApplyRefund() {
            this.$emit("onApplyRefund", this.dataInfo.id);
        },
        onEvaluate() {
            uni.navigateTo({
                url: `/subPages/technician/recruit/appraise?order_id=${this.dataInfo.id}`,
            });
        },
        oneMoreOrder() {
            uni.navigateTo({
                url: `/subPages/technician/home/serviceDetail?id=${this.dataInfo.goods.service_id}`,
            });
        },
        // 升级/加钟
        onUpgrade() {
            uni.navigateTo({
                url: `/subPages/technician/recruit/upgrade?id=${
                    this.dataInfo.id
                }&order=${JSON.stringify(this.dataInfo)}`,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap-order-btn-bg {
    flex: 1;
    overflow: hidden;

    .list-btn {
        width: 140rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        border-radius: 8rpx;
        overflow: hidden;
        margin-left: 30rpx;

        &:first-child {
            margin-left: 0rpx;
        }
    }

    .details-btn {
        width: 222rpx;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        border-radius: 44rpx;
        overflow: hidden;
        margin-left: 22rpx;
        &:first-child {
            margin-left: 0rpx;
        }
    }

    .three-btn {
        background: $grad-theme-color;
        color: $bg-text-color;
    }

    .four-btn {
        border: 2rpx solid #b0b0b0;
        color: #b0b0b0;
    }

    .one-btn {
        color: $theme-color;
        border: 2rpx solid $theme-color;
    }
    .two-btn {
        color: $bg-text-color;
        background-color: $theme-color;
    }
}
</style>
